<template>
  <div class="v-fill-size" v-loading="pageLoading">
    <h1 class="v-txt-center">我是测试页面, 嗨～</h1>
    <span class="test-label">icon</span>
    <span
      v-icon="'icon-lianjie'"
      class="v-flex"
      :class="['v-justify-center']"
      :style="{ color: 'red' }"
    ></span>
    <search-bar class="v-m-b" v-model="searchValue" @search="search" />
    <apple-button class="v-m-b v-m-r" type="primary" @click="receiveClick" content="带涟漪的1" />
    <apple-button class="v-m-b v-m-r" @click="receiveClick" content="带涟漪的2" />
    <apple-button
      class="v-m-b v-m-r"
      type="primary"
      :ripple="false"
      @click="receiveClick"
      content="不带涟漪的1"
    />
    <apple-button class="v-m-b v-m-r" :ripple="false" @click="receiveClick" content="不带涟漪的2" />
    <apple-button class="v-m-r" :border="false" content="没有边框的1" />
    <apple-button class="v-m-r" type="primary" :border="false" content="没有边框的2" />
    <!-- <apple-button class="v-m-r" type="primary" :border="false" content="没有边框的2" push /> -->
    <!-- <apple-button class="v-m-r" :border="false" content="没有边框的2" push /> -->
    <apple-switch class="v-m-b" v-model="state" @change="receiveStateChange" />
    <tabs class="v-m-b" :tabs="tabs" @change="tabsChange" is-btn>
      <template #0>
        <div class="v-p">
          <apple-button type="primary" block width="100%" content="图片" />
        </div>
      </template>
      <template #1>
        <div class="v-p">
          <apple-button type="primary" content="视频" />
        </div>
      </template>
      <template #2>
        <div class="v-p">
          <apple-button type="primary" content="音乐" />
        </div>
      </template>
    </tabs>
    <v-input class="v-m-b" label="自动聚焦" autofocus width="260px" />
    <carousel class="carousel" icon-round round :images="images" />
    <apple-button
      icon="custom-icon-caidan1"
      icon-width="2em"
      icon-height="2em"
      @click="menuExpand = !menuExpand"
    />
    <v-menu :expand="menuExpand" :unique-opened="true" />
    <span class="test-label v-m-t v-m-b">抽屉Drawer</span>
    <apple-button @click="visible = !visible" content="展开" />
    <drawer v-model:visible="visible" direction="right" />
  </div>
</template>


<script lang="ts">
import { ref, inject, watch, defineComponent } from "vue";
import SearchBar from "@/components/SearchBar.vue";
import AppleButton from "@/components/apple/AppleButton.vue";
import Tabs from '@/components/Tabs.vue';
import Carousel from '@/components/carousel/Carousel.vue';
import AppleSwitch from '@/components/apple/AppleSwitch.vue';
import VInput from '@/components/Input.vue';
import VMenu from '@/components/navigation/Menu.vue';
import Drawer from '@/components/Drawer.vue';
import { IMessage } from "@/interface/IUse";
import { refresh } from '@/utils'

export default defineComponent({
  name: 'Test',
  components: {
    SearchBar,
    AppleButton,
    Tabs,
    Carousel,
    AppleSwitch,
    VInput,
    VMenu,
    Drawer
  },
  setup() {
    const $message: IMessage = inject('message') as IMessage;
    const searchValue = ref("");
    const tabs = ref(['图片', '视频', '音乐', 'veloma']);
    const images = ref([require('../assets/banner/1.jpg'), require('../assets/banner/2.jpg'), require('../assets/banner/3.jpg')]);
    const state = ref(true);
    const menuExpand = ref(true);
    const pageLoading = ref(false);
    const visible = ref(false);
    watch(state, (v) => {
      $message({
        type: v ? 'success' : 'warning',
        content: `watch监听到状态发生变化: ${v}`
      });
    }, { immediate: true });

    /* 搜索 */
    const search = (v: string) => {
      $message({
        type: 'success',
        content: `点击搜索: ${v}`
      });
    };
    /* 接收点击 */
    const receiveClick = () => {
      $message({
        type: 'info',
        content: '按钮点击'
      });
    };
    /* 标签变化 */
    const tabsChange = (info: { name: string }) => {
      const { name } = info;
      $message({
        type: 'info',
        content: `标签切换: ${name}`
      });
    };
    /* switch状态变化 */
    const receiveStateChange = (v: any) => {
      $message({
        type: v ? 'success' : 'warning',
        content: `change事件接收到状态发生变化: ${v}`
      });
    }

    refresh('test', () => {
      pageLoading.value = true;
      setTimeout(() => {
        pageLoading.value = false;
      }, 2000);
    });
  
    return {
      searchValue,
      tabs,
      images,
      state,
      menuExpand,
      pageLoading,
      visible,
      $message,
      search,
      receiveClick,
      tabsChange,
      receiveStateChange
    }
  }
})

</script>

<style scoped>
.v-fill-size {
  overflow-y: auto;
  padding: 10px;
  padding-bottom: 100px;
}
.carousel {
  margin: 50px auto;
}
.test-label {
  color: #666;
}
</style>
